<template>
  <div>
    <a-button
      type="primary"
      @click="addService"
      v-has="{ a: $route, b: 2 }"
      class="d-a-center"
      >添加分类</a-button
    >
    <!-- 左侧一级分类服务列表 这个要手写？这样位置有点奇怪啊感觉着可以再写一个table表格啊哈-->
    <div class="main">
      <!--右侧二级分类列表 -->
      <div style="flex: 1">
        <a-table
          :columns="childrenColums"
          :data-source="childrenList"
          bordered
          :loading="loading"
          :pagination="pagination"
          @change="handleTableChange"
          :customRow="customRow"
        >
          <!-- :scroll="{ y: 540, x: 'auto' }" -->

          <template #homeImgUrl="{ record }">
            <img
              style="width: 60px; height: 60px"
              :src="record.homeImgUrl"
              alt=""
            />
          </template>
          <template #kindImgUrl="{ record }">
            <img
              style="width: 60px; height: 60px"
              :src="record.kindImgUrl"
              alt=""
            />
          </template>

          <template #operation="{ record }">
            <a-button
              type="link"
              @click="handleJump(record.id)"
              v-has="{ a: $route, b: 1 }"
              >进入二级分类</a-button
            >
            <a-button
              type="link"
              @click="editService(record, 0)"
              v-has="{ a: $route, b: 2 }"
              >编辑</a-button
            >
            <a-button
              type="link"
              @click="delService(record.id, 0)"
              v-has="{ a: $route, b: 2 }"
            >
              删除</a-button
            >
          </template>
        </a-table>
      </div>
    </div>
  </div>
  <div>
    <a-modal :visible="visible" :footer="null" width="90%" @cancel="cancel">
      <!-- 新增服务项 -->
      <a-form
        ref="modalRef"
        :rules="rules"
        :model="modalForm"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="分类名称" name="kindName">
          <a-input
            placeholder="请输入分类名称"
            v-model:value="modalForm.kindName"
            maxlength="4"
          ></a-input>
        </a-form-item>
        <a-form-item label="一级分类图标" name="homeImgUrl">
          <a-upload
            v-model:file-list="fileList1"
            list-type="picture-card"
            class="avatar-uploader"
            :maxCount="1"
            :customRequest="uploadImage1"
            :before-upload="beforeUpload"
          >
            <!--   @change="handleChange1" -->
            <div v-if="fileList1.length < 1" class="ant-upload-text">
              <plus-outlined />
            </div>
          </a-upload>
          <span>*等待ui设计稿</span>
        </a-form-item>
        <a-form-item label="分类图标" name="kindImgUrl">
          <a-upload
            v-model:file-list="fileList"
            list-type="picture-card"
            class="avatar-uploader"
            :maxCount="1"
            :customRequest="uploadImage"
            :before-upload="beforeUpload"
          >
            <!-- @change="handleChange1" -->
            <div v-if="fileList.length < 1" class="ant-upload-text">
              <plus-outlined />
            </div>
          </a-upload>
          <span>*等待ui设计稿</span>
        </a-form-item>
      </a-form>

      <a-divider></a-divider>
      <!-- 确定和取消 -->
      <a-row>
        <a-col :span="4" :offset="6">
          <a-button type="primary" size="large" @click="cancel">关闭</a-button>
        </a-col>
        <a-col :span="4" :offset="2">
          <a-button type="primary" size="large" @click="save">保存</a-button>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>
<script>
import {
  reactive,
  ref,
  watch,
  computed,
  defineComponent,
  createVNode,
  toRefs,
} from "vue";
import { FormInstance } from "ant-design-vue";
import {
  CheckOutlined,
  EditOutlined,
  ArrowDownOutlined,
  ArrowUpOutlined,
  ExclamationCircleOutlined,
  EditTwoTone,
  DeleteTwoTone,
  PlusOutlined,
  MinusCircleOutlined,
  LoadingOutlined,
} from "@ant-design/icons-vue";
import router from "@/router/index.js";
import { Modal, message, notification } from "ant-design-vue";
import Tinymce from "@/components/common/tinymce/tinymce";
import Tinymce1 from "@/components/common/tinymce/tinymce1";
import * as api from "@/api/service/index.js";
import UploadImage from "@/components/common/UploadImage.vue";
import { useModal } from "@/hooks"

export default {
  setup() {
    const serviceAct = ref(0);
    let change1 = null; // 源目标数据序号
    let change2 = null;
    let changeObj = null;
    const data = reactive({
      serviceList: [],
      childrenList: [],
      loading: true, //表格加载
      // headerTitle: "",
      isEdit: "", //编辑or新增
      type: 2, //类型
      visible: false,
      activeKey: "0",
      uploadLoading: false,
      imageUrl: "",
      modalForm1: {},
      modalForm: { detail: "" },
      value: "",
      fileList: [],
      fileList1: [],
      fileList2: [],
      detail: "哈哈哈",
      uploadRef: "",
      columns: [
        {
          title: "套餐名称",
          dataIndex: "sonServiceName",
          width: "30%",
        },
        {
          title: "套餐价格(元)",
          dataIndex: "price",
        },
        {
          title: "套餐时长(分钟)",
          dataIndex: "duration",
        },
        {
          title: "服务次数",
          dataIndex: "serviceNum",
        },
        {
          title: "操作",
          dataIndex: "operation",
        },
      ],
      flowPop: false,
      columnsFlow: [
        {
          title: "服务规范",
          dataIndex: "serveName",
          width: "70%",
        },
        {
          title: "操作",
          dataIndex: "operation",
        },
      ],
      // 工作流程数据
      dataFlow: [
        // {
        //  id:0
        //   name: "服务流程",
        //   operation: "",
        // },
      ],
      dataSource: [],
      obj: {},
      // 修改当前套餐的index
      flag: -1,
      serviceDetails: [],
    });
    const modalRef = ref("");
    const modalRef1 = ref("");
    const editor = ref("");
    const editor1 = ref("");

    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 10,
      total: 0,
    });

    // 左侧服务分类列表
    const serviceColums = [
      {
        title: "服务名称",
        dataIndex: "name",
        className: "table",
        align: "center",
        slots: {
          customRender: "service",
        },
      },
    ];

    const childrenColums = [
      // {
      //   title: "拖动排序",
      //   // dataIndex: "serveName",
      //   className: "table",
      //   align: "center",
      // },
      {
        title: "序号",
        dataIndex: "sortId",
        className: "table",
        align: "center",
        // slots: {
        //   customRender: "sort",
        // },
      },
      {
        title: "分类名称",
        dataIndex: "kindName",
        className: "table",
        align: "center",
        // sorter: (a, b) => a.price - b.price,
      },
      {
        title: "一级分类图标",
        dataIndex: "homeImgUrl",
        className: "table",
        align: "center",
        slots: {
          customRender: "homeImgUrl",
        },
      },
      {
        title: "分类图标",
        dataIndex: "kindImgUrl",
        className: "table",
        align: "center",
        slots: {
          customRender: "kindImgUrl",
        },
      },
      {
        title: "二级分类",
        dataIndex: "servicesTypeCount",
        className: "table",
        align: "center",
        ellipsis: true,
      },
      {
        title: "服务项目",
        dataIndex: "servciesCount",
        className: "table",
      },
      {
        title: "创建时间",
        dataIndex: "createdTime",
        className: "table",
        align: "center",
        ellipsis: true,
      },
      {
        title: "操作",
        dataIndex: "operation",
        className: "table",
        align: "center",
        fixed: "right",
        slots: {
          customRender: "operation",
        },
      },
    ];

    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: (total, range) => {
        return "共" + total + "条";
      },
      total: page.total,
      showQuickJumper: true,
      showSizeChanger: true,
    }));

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      // console.log(pagination, "当前分页");
      page.current = pagination.current;
      page.pageSize = pagination.pageSize;

      // 请求列表接口
      initChildrenList();
    };
    // 拖拽
    // const customRow = (record, index) => {
    //   //  console.log(record, index);// 这里输出是表格全部的数据
    //   return {
    //     props: {
    //       // draggable: 'true'
    //     },
    //     style: {
    //       cursor: "pointer",
    //     },
    //     // 鼠标移入
    //     onMouseenter: (event) => {
    //       // 兼容IE
    //       var ev = event || window.event;
    //       ev.target.draggable = true; // 让你要拖动的行可以拖动，默认不可以
    //     },
    //     // 开始拖拽
    //     onDragstart: (event) => {
    //       // 兼容IE
    //       var ev = event || window.event;
    //       // 阻止冒泡
    //       ev.stopPropagation();
    //       // 得到源目标数据序号
    //       change1 = index;
    //       changeObj = record;
    //       console.log(record, index, "source");
    //     },
    //     // 拖动元素经过的元素
    //     onDragover: (event) => {
    //       // 兼容 IE
    //       var ev = event || window.event;
    //       // 阻止默认行为
    //       ev.preventDefault();
    //     },
    //     // 鼠标松开
    //     onDrop: (event) => {
    //       // 兼容IE
    //       var ev = event || window.event;
    //       // 阻止冒泡
    //       ev.stopPropagation();
    //       // 得到目标数据序号
    //       change2 = index;
    //       // 这里就是让数据位置互换，让视图更新 你们可以看record，index的输出，看是什么
    //       // [data.childrenList[change1], data.childrenList[change2]] = [
    //       //   data.childrenList[change2],
    //       //   data.childrenList[change1]
    //       // ];
    //       if (change1 != change2) {
    //         api
    //           .ServiceTypeParentSort({
    //             downOrUp: change1 > change2 ? 0 : 1,
    //             id: changeObj.id,
    //             targetId: record.id,
    //           })
    //           .then((r) => {
    //             if (r.success) {
    //               initChildrenList();
    //             }
    //           });
    //       }
    //       console.log(record, index, "target");
    //     },
    //   };
    // };
    // 新增服务
    const addService = () => {
      data.fileList = [];
      data.fileList1 = [];
      data.visible = true;
      data.serviceDetails = [];
      data.isEdit = 2;
      data.type = 2;
      data.activeKey = "0";
    };
    // 编辑服务和服务项目
    const editService = async (item, type) => {
      data.isEdit = 1;
      data.modalForm = { ...item };
      data.fileList = [{ url: item.kindImgUrl }];
      data.fileList1 = [{ url: item.homeImgUrl }];
      data.visible = true;
    };
    async function initServiceDetail(id) {
      let res = await selectServiceById(id);
      if (res.success) {
        return res.object;
      }
    }
    // 删除服务和服务项目
    const delService = (key, type) => {
      const {closeModal} = useModal.confirm({
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () =>
          createVNode(
            "div",
            { style: "color:red;" },
            "确定要删除当前服务类型吗"
          ),
        okType: "danger",
        onOk: async () => {
          let res = await api.deleteServiceTypeParentInfo({ id: key });
          if (res.success) {
            message.success("删除成功");
            initChildrenList();
            closeModal()

          }
        },
        
        class: "test",
      });
    };
    

    // 获取服务下的子列表:本来写的一级和二级联动，嗯……然后呢？不动了……我……无语了……
    const getChildrenList = (e, index) => {
      if (serviceAct.value == index) return;
      serviceAct.value = index;
      page.current = 1;
      initChildrenList();
    };
    const up = (e, index) => {
      console.log(e, index, "升序");
      const {closeModal} = useModal.confirm({
        title: () => "确定升序吗?",
        icon: () => createVNode(ExclamationCircleOutlined),
        onOk: async () => {
          let data = await initServiceDetail(e);
          data.sort--;

          let res = await updateAndAddService(data);
          if (res.success) {
            initChildrenList();
            message.success("升序成功~");
          }
        },
        
        class: "test",
      });
    };
    const down = (e, index) => {
      console.log(e, index, "降序");
      const {closeModal} = useModal.confirm({
        title: () => "确定降序吗?",
        icon: () => createVNode(ExclamationCircleOutlined),
        onOk: async () => {
          let data = await initServiceDetail(e);
          data.sort++;
          let res = await updateAndAddService(data);
          if (res.success) {
            initChildrenList();
            message.success("排序成功~");
            closeModal()
          }
        },
        
        class: "test",
      });
    };
    

    const headerTitle = computed(() => {
      let title = data.isEdit == 1 ? "编辑" : "新增";
      return title;
    });
    const rules = {
      kindName: [{ required: true, message: "请输入分类名称!" }],
    };

    const cancel = () => {
      console.log("点击了关闭");
      //置空
      data.modalForm1 = {};
      data.modalForm = {};
      data.dataSource = [];
      data.dataFlow = [];
      data.visible = false;
    };
    const uploadImage2 = async (file) => {
      let formData = new FormData();
      formData.append("file", file.file);
      /*
         直接打印formData是空的，别人说要通过get才能访问到
          console.log(formData.get("file"), "上传图片");

         formData上传的时候不能使用{}包括比如  let data={file:formData,name:'test'}
          这样上传就是空对象……
          let res = await uploadPicture(data);

         只能单独放，这样才可以、和后端说下改下……
         let res = await uploadPicture(formData);
      
      */

      let res = await uploadPicture(formData, "service");
      // // url存入列表中,为什么是两个fileList
      if (res.success) {
        // console.log(data.fileList, "fileList列表是");
        data.fileList2 = [
          {
            uid: file.file.uid,
            url: res.object,
            status: "done",
            name: file.file.name,
          },
        ];
        // data.fileList.shift(1);
      }
      // console.log(data.fileList, "fileList列表是");
    };
    const uploadImage = async (file) => {
      let formData = new FormData();
      formData.append("file", file.file);
      /*
         直接打印formData是空的，别人说要通过get才能访问到
          console.log(formData.get("file"), "上传图片");

         formData上传的时候不能使用{}包括比如  let data={file:formData,name:'test'}
          这样上传就是空对象……
          let res = await uploadPicture(data);

         只能单独放，这样才可以、和后端说下改下……
         let res = await uploadPicture(formData);
      
      */

      let res = await api.uploadPicture(formData, "service");
      // // url存入列表中,为什么是两个fileList
      if (res.success) {
        data.fileList = [
          {
            uid: file.file.uid,
            url: res.object,
            status: "done",
            name: file.file.name,
          },
        ];
      }
    };
    const uploadImage1 = async (file) => {
      let formData = new FormData();
      formData.append("file", file.file);
      /*
         直接打印formData是空的，别人说要通过get才能访问到
          console.log(formData.get("file"), "上传图片");

         formData上传的时候不能使用{}包括比如  let data={file:formData,name:'test'}
          这样上传就是空对象……
          let res = await uploadPicture(data);

         只能单独放，这样才可以、和后端说下改下……
         let res = await uploadPicture(formData);
      
      */

      let res = await api.uploadPicture(formData, "service");
      // // url存入列表中,为什么是两个fileList
      if (res.success) {
        data.fileList1 = [
          {
            uid: file.file.uid,
            url: res.object,
            status: "done",
            name: file.file.name,
          },
        ];
      }
    };

    const handleChange = (value) => {
      data.modalForm.typeId = value;
    };
    const previewVisible = ref(false);
    const previewImage = ref("");
    const imageUrl = ref("");

    function getBase64(img, callback) {
      const reader = new FileReader();
      reader.addEventListener("load", () => callback(reader.result));
      reader.readAsDataURL(img);
    }
    const handleCancel = () => {
      previewVisible.value = false;
    };

    const handlePreview = async (file) => {
      // console.log(file, "上传图片这是");
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      previewImage.value = file.url || file.preview;
      previewVisible.value = true;
    };

    const handleChange1 = (info) => {
      if (info.file.status === "uploading") {
        data.uploadLoading = true;
        return;
      }

      if (info.file.status === "done") {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (base64Url) => {
          data.imageUrl = base64Url;
          data.uploadLoading = false;
        });
      }

      if (info.file.status === "error") {
        data.uploadLoading = false;
        message.error("上传错误");
      }
    };

    const beforeUpload = (file) => {
      const isJpgOrPng =
        file.type === "image/psd" ||
        file.type === "image/bmp" ||
        file.type === "image/jpg" ||
        file.type === "image/png" ||
        file.type === "image/gif" ||
        file.type === "image/jpeg";

      if (!isJpgOrPng) {
        message.error("图片格式不正确!");
      }
      const isLt2M = file.size / 1024 / 1024 < 5;

      if (!isLt2M) {
        message.error("图片大小不超过5MB!");
      }
      return isJpgOrPng && isLt2M;
    };

    // 富文本内容
    const tinymceInput = (value) => {
      console.log(value, "服务简介");
      data.modalForm.detail = value;
    };
    const tinymceInput1 = (value) => {
      // console.log(value, "预约须知");
      data.modalForm.notice = value;
    };

    // 保存,根据tab的绑定的key值判断编辑服务项目还是类别
    const save = () => {
      console.log(data.modalForm, "data.modalForm");

      let ref = data.activeKey == "0" ? modalRef : modalRef1;

      ref.value
        .validate()
        .then(async () => {
          // console.log(data.modalForm, "表单内容");

          if (data.fileList.length == 0) {
            message.error("请上传分类图标");
            return;
          }
          if (data.fileList1.length == 0) {
            message.error("请上传首页图标");
            return;
          }
          data.modalForm.kindImgUrl = data.fileList[0].url;
          data.modalForm.homeImgUrl = data.fileList1[0].url;

          let res = await api.addServiceTypeParentInfo(data.modalForm);
          if (res.success) {
            message.success("操作成功");
            data.visible = false;
            data.modalForm = {};
            initChildrenList();
          }

          // 关闭弹窗
          // emit('closeModal')
        })
        .catch((error) => {
          console.log("error", error);
        });
    };

    initChildrenList();
    // 初始化服务列表
    async function initChildrenList() {
      let obj = {
        pageNum: page.current,
        pageSize: page.pageSize,
      };
      let res = await api.serviceTypeParentList(obj);
      if (res.success) {
        // res.object.records.map((el) => (el.key = el.id));
        // data.serviceList = res.object.records;
        data.childrenList = res.object.list;
        page.total = res.object.total;
        data.loading = false;
        // initChildrenList(res.object.records[0].id);
      }
    }
    // 二级列表
    async function initChildrenList2() {
      let obj = {
        pageNum: page.current,
        pageSize: page.pageSize,
      };
      let res = await api.serviceTypeParentList(obj);
      if (res.success) {
        res.object.records.map((el) => (el.key = el.id));
        data.childrenList = res.object.records;
        page.total = res.object.total;
        data.loading = false;
      }
    }
    const closeFlowPop = () => {
      data.flowPop = false;
      formRef.value.resetFields();
      dynamicValidateForm.serveName = "";
      dynamicValidateForm.users = [];
      dynamicValidateForm.id = [];
      dynamicValidateForm.isEdit = false;
    };

    const methods = {
      handleFlowPop() {
        data.flowPop = true;
      },
      handleAdd() {
        let idEdit = data.dataSource.some((i) => i.isEdit);
        if (idEdit) return;
        const newData = {
          key: ``,
          sonServiceName: ``,
          price: "",
          duration: "",
          serviceNum: "",
          operation: "",
          isEdit: true,
        };
        data.dataSource.push(newData);
      },
      handleEdit(ind) {
        data.flag = ind;
        // data.dataSource = data.dataSource.map(i => i.isEdit=false)
        data.dataSource[ind].isEdit = true;
        data.obj = { ...data.dataSource[ind], isEdit: true };
      },
      handleDelete(ind) {
        data.dataSource.splice(ind, 1);
      },
      handleDeleteDataFlow(i) {
        data.dataFlow.splice(i, 1);
      },

      handleSave() {
        console.log(data.obj, "======");
        if (
          !(
            data.obj &&
            data.obj.sonServiceName &&
            data.obj.price &&
            data.obj.duration
          )
        ) {
          message.error("请输入名称、价格、时长");
          return;
        }
        if (data.flag > -1) {
          data.dataSource[data.flag] = {
            sonServiceName: data.obj.sonServiceName,
            price: data.obj.price,
            duration: data.obj.duration,
            serviceNum: data.obj.serviceNum,
            operation: "",
            id: data.obj.id,
          };
          data.flag = -1;
        } else {
          data.dataSource.pop();
          data.dataSource.push({
            sonServiceName: data.obj.sonServiceName,
            price: data.obj.price,
            serviceNum: data.obj.serviceNum,
            duration: data.obj.duration,
            operation: "",
          });
        }

        data.obj = {};
      },
    };
    // 工作流程
    const formRef = ref();
    const dynamicValidateForm = reactive({
      serveName: "",
      users: [],
      id: Date.now(),
    });
    const handleEditFlow = (item, index) => {
      debugger;
      console.log(data.dataFlow[index], "00000000");
      dynamicValidateForm.isEdit = true;
      dynamicValidateForm.serveName = item.serveName;
      dynamicValidateForm.id = item.id;
      dynamicValidateForm.users = JSON.parse(item.users);

      data.flowPop = true;
    };
    const removeService = (index) => {
      // let index = data.serviceDetail.indexOf(item);
      // if (index !== -1) {
      data.serviceDetails.splice(index, 1);
    };
    const removeUser = (item) => {
      let index = dynamicValidateForm.users.indexOf(item);
      // if (index !== -1) {
      dynamicValidateForm.users.splice(index, 1);
      // }
    };
    const addServiceDetail = () => {
      console.log(
        data.serviceDetails,
        "res.serviceDetailsres.serviceDetails-----"
      );

      data.serviceDetails.push({
        serviceDetailTitle: "",
        serviceDetail: "",
      });
    };
    const addUser = () => {
      dynamicValidateForm.users.push({
        first: "",
        last: "",
        id: Date.now(),
      });
      console.log(dynamicValidateForm.users, "-------");
    };
    const handleJump = (id) => {
      router.push({
        path: "/content/service/twoKinds",
        // path: "/content/service/threeKinds",
        query: { id: id },
      });
    };
    const onFinish = (values) => {
      if (dynamicValidateForm.users.length == 0) {
        message.error("请至少输入一条规范详情");
        return;
      }
      debugger;
      if (dynamicValidateForm.isEdit) {
        data.dataFlow = data.dataFlow.map((d) => {
          if (d.id == dynamicValidateForm.id) {
            return {
              id: dynamicValidateForm.id,
              serveName: dynamicValidateForm.serveName,
              users: JSON.stringify(dynamicValidateForm.users),
            };
          }
          return d;
        });
      } else {
        data.dataFlow.push({
          id: dynamicValidateForm.id,
          serveName: dynamicValidateForm.serveName,
          users: JSON.stringify(dynamicValidateForm.users),
        });
      }
      console.log("Received values of form:", { ...dynamicValidateForm });
      console.log("dynamicValidateForm.users:", dynamicValidateForm);
      closeFlowPop();
    };
    return {
      formRef,
      dynamicValidateForm,
      onFinish,
      removeUser,
      addUser,
      ...toRefs(data),
      ...methods,
      childrenColums,
      pagination,
      serviceAct,
      serviceColums,
      addService,
      delService,
      editService,
      getChildrenList,
      handleTableChange,
      // customRow,
      up,
      down,
      modalRef,
      imageUrl,
      labelCol: { style: { width: "150px", fontWeight: "bold" } },
      wrapperCol: { span: 12 },
      previewVisible,
      previewImage,
      rules,
      modalRef1,
      tinymceInput1,
      tinymceInput,
      handleCancel,
      handlePreview,
      handleChange,
      handleChange1,
      beforeUpload,
      save,
      cancel,
      headerTitle,
      uploadImage,
      uploadImage2,
      uploadImage1,
      editor,
      editor1,
      closeFlowPop,
      handleEditFlow,
      addServiceDetail,
      removeService,
      handleJump,
    };
  },

  components: {
    CheckOutlined,
    EditOutlined,
    ExclamationCircleOutlined,
    EditTwoTone,
    DeleteTwoTone,
    ArrowUpOutlined,
    ArrowDownOutlined,
    PlusOutlined,
    LoadingOutlined,
    Tinymce,
    Tinymce1,
    UploadImage,
    MinusCircleOutlined,
  },
};
</script>

<style scoped lang="less">
.flex {
  display: flex;
  align-items: center;
}
.main {
  display: flex;
  margin-top: 30px;
}
.ant-upload-text {
  padding: 40px;
  display: flex;
}
.service {
  display: flex;
  justify-content: space-between;

  // 服务激活样式
  .name-act {
    color: #2a9d8f;
    font-weight: bolder;
  }
  .edit {
    padding: 0px 5px;
  }
}
.process {
  display: flex;
  .process-list {
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    .num {
      width: 50px;
      height: 50px;
      border: solid 1px #999;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
    .img {
      width: 50px;
      height: 50px;
      background-color: tomato;
      margin: 10px 0px;
    }
    .title {
    }
  }
}
.table {
  width: 100%;
  border-left: 1px solid #eee;
  border-top: 1px solid #eee;
  tr {
    td {
      input {
        border: 1px solid #aaa !important;
        width: 97% !important;
      }
    }
    th,
    td {
      text-align: center;
      border-right: 1px solid #eee;
      border-bottom: 1px solid #eee;
    }
  }
}
.myhtml {
  width: 160%;
  height: 140%;
  padding: 8rpx 6rpx;
  border: 2rpx solid #d9d9d9;
  border-radius: 2px;
  color: rgba(0, 0, 0, 0.25);
  background: #f5f5f5;
}
.flowWrap {
  .f_item {
    padding: 20px 0 !important;
  }
  .left {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 22px;
    margin-right: 30px;
    .spot {
      color: red;
    }
  }
}
.ant-form-item {
  margin-bottom: 0px;
}
</style>
